quickSettings: Split menu toggle

Menu toggles are currently regular toggles with an additional
arrow button. This allows for a simpler implementation, but
has downsides with regards to keyboard navigation and hover
feedback.

To make it more obvious that the two parts of the menu toggle
perform different actions, change the overall structure of the
toggle to *contain* a regular toggle and the menu button.

That way each element uses its own hover effect, and shows up
in the keynav focus chain.

https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5964

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2632>

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 494289d423872b0bc8c23391028e5b953399770a..87028565e5d7673d1db74274cb87f1ae1ede2bc2 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -12,13 +12,15 @@
   spacing-columns: $base_padding*2;
 }
 
-.quick-toggle {
+.quick-toggle, .quick-menu-toggle {
   border-radius: 99px;
   min-width: 12em;
   max-width: 12em;
   min-height: 48px;
   border:none;
+}
 
+.quick-toggle {
   &:checked { @include button(default, $c:$selected_bg_color); }
 
   & > StBoxLayout { spacing: $base_padding*1.5; }
@@ -37,16 +39,26 @@
     font-size: 12px;
   }
 
-  .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
+  .quick-toggle-icon { icon-size: $base_icon_size; }
 }
 
 .quick-menu-toggle {
-  &:ltr > StBoxLayout { padding-right: 0; }
-  &:rtl > StBoxLayout { padding-left: 0; }
+  & .quick-toggle {
+    min-width: auto;
+    max-width: auto;
+
+    &:ltr { border-radius: 99px 0 0 99px; }
+    &:rtl { border-radius: 0 99px 99px 0; }
+
+    &:ltr:last-child { border-radius: 99px; }
+    &:rtl:last-child { border-radius: 99px; }
+  }
 
   & .quick-toggle-arrow {
-    background-color: transparentize($fg_color, 0.9);
     padding: $base_padding $base_padding*1.75;
+    border: none;
+
+    &:checked { @include button(default, $c:$selected_bg_color); }
 
     &:ltr { border-radius: 0 99px 99px 0; }
     &:rtl { border-radius: 99px 0 0 99px; }

diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index fd584e2b47db6ac81f6fc28963d27ecaa5b66f73..fe42e504faabbb7240223c0f0594de65002829ed 100644 (file)
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -10,6 +10,8 @@ const {PopupAnimation} = imports.ui.boxpointer;
 const DIM_BRIGHTNESS = -0.4;
 const POPUP_ANIMATION_TIME = 400;
 
+const MENU_BUTTON_BRIGHTNESS = 0.1;
+
 var QuickSettingsItem = GObject.registerClass({
     Properties: {
         'has-menu': GObject.ParamSpec.boolean(
@@ -130,12 +132,22 @@ var QuickToggle = GObject.registerClass({
 
 var QuickMenuToggle = GObject.registerClass({
     Properties: {
+        'title': GObject.ParamSpec.string('title', '', '',
+            GObject.ParamFlags.READWRITE,
+            null),
+        'subtitle': GObject.ParamSpec.string('subtitle', '', '',
+            GObject.ParamFlags.READWRITE,
+            null),
+        'icon-name': GObject.ParamSpec.override('icon-name', St.Button),
+        'gicon': GObject.ParamSpec.object('gicon', '', '',
+            GObject.ParamFlags.READWRITE,
+            Gio.Icon),
         'menu-enabled': GObject.ParamSpec.boolean(
             'menu-enabled', '', '',
             GObject.ParamFlags.READWRITE,
             true),
     },
-}, class QuickMenuToggle extends QuickToggle {
+}, class QuickMenuToggle extends QuickSettingsItem {
     _init(params) {
         super._init({
             ...params,
@@ -144,23 +156,59 @@ var QuickMenuToggle = GObject.registerClass({
 
         this.add_style_class_name('quick-menu-toggle');
 
+        this._box = new St.BoxLayout();
+        this.set_child(this._box);
+
+        const contents = new QuickToggle({
+            x_expand: true,
+        });
+        this._box.add_child(contents);
+
+        // Use an effect to lighten the menu button a bit, so we don't
+        // have to define two full sets of button styles (normal/default)
+        // with slightly different colors
+        const menuHighlight = new Clutter.BrightnessContrastEffect();
+        menuHighlight.set_brightness(MENU_BUTTON_BRIGHTNESS);
+
         this._menuButton = new St.Button({
-            child: new St.Icon({
-                style_class: 'quick-toggle-arrow',
-                icon_name: 'go-next-symbolic',
-            }),
+            style_class: 'quick-toggle-arrow icon-button',
+            child: new St.Icon({icon_name: 'go-next-symbolic'}),
+            accessible_name: _('Open menu'),
+            effect: menuHighlight,
+            can_focus: true,
             x_expand: false,
             y_expand: true,
         });
         this._box.add_child(this._menuButton);
 
+        this.bind_property('checked',
+            contents, 'checked',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('title',
+            contents, 'title',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('subtitle',
+            contents, 'subtitle',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('icon-name',
+            contents, 'icon-name',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('gicon',
+            contents, 'gicon',
+            GObject.BindingFlags.SYNC_CREATE);
+
         this.bind_property('menu-enabled',
             this._menuButton, 'visible',
             GObject.BindingFlags.SYNC_CREATE);
         this.bind_property('reactive',
             this._menuButton, 'reactive',
             GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('checked',
+            this._menuButton, 'checked',
+            GObject.BindingFlags.SYNC_CREATE);
         this._menuButton.connect('clicked', () => this.menu.open());
+        this._menuButton.connect('popup-menu', () => this.emit('popup-menu'));
+        contents.connect('popup-menu', () => this.emit('popup-menu'));
         this.connect('popup-menu', () => {
             if (this.menuEnabled)
                 this.menu.open();

diff --git a/po/POTFILES.in b/po/POTFILES.in
index ac35c70eae236630155f705adb397cd3af70c59e..5ceecebcbde2257eb5ff0c86b45c2e126b5bdaed 100644 (file)
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -48,6 +48,7 @@ js/ui/overview.js
 js/ui/padOsd.js
 js/ui/panel.js
 js/ui/popupMenu.js
+js/ui/quickSettings.js
 js/ui/runDialog.js
 js/ui/screenShield.js
 js/ui/screenshot.js